iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

從零開始學習React 系列 第 12

Day12 React -Events

  • 分享至 

  • xImage
  •  

在 React中處理事件就像 HTML 一樣,React 可以根據用戶事件執行動作。
具有與 HTML 相同的事件:點擊、更改、滑鼠事件…等。

使用 react 處理事件與在 DOM 上處理事件有一些語法差異。
React 事件是用駝峰式語法編寫的:onClick 而不是 onclick。
React 事件處理程序寫在花括號內:onClick={ ShowDate } 而不是 onClick="ShowDate()"。

今天小實作是用onMouseEnter,onMouseLeave改變背景顏色。

https://ithelp.ithome.com.tw/upload/images/20210927/20139800xLV7C8IIyi.png

https://ithelp.ithome.com.tw/upload/images/20210927/2013980099LgAUlJDC.png

import React, {useState} from 'react'

const Events = () => {
    const palettes = "#D5BFBF"
    const  [bg,setBg] =  useState(palettes);
    const  [name,setName] =  useState("Click Change");

    const bgChange = () =>{     
       let newBg = "#A8E7E9";
       setBg(newBg);
       setName("Change Successful");
    };
    const bgBack = ()=>{
        setBg(palettes);
       setName("Click Change");
    }
    return (
        <div>
            <div style= { {backgroundColor:bg } }>
                <button onMouseEnter={bgChange} onMouseLeave={bgBack}> {name} </button>
            </div>
        </div>
    )
}

export default Events

上一篇
Day11 小實作-數字時鐘
下一篇
Day13 React- Forms(1)
系列文
從零開始學習React 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言